reactrouter.js ➔ instrumentReactRouter - Code Metrics - LCSOGthb/AirMerge - Measure and Improve Code Quality continuously with Scrutinizer

reactrouter.js ➔ instrumentReactRouter D
last analyzed 2025-10-13 00:06 UTC

↳ Parent: node_modules/@sentry/react/build/cjs/reactrouter.js

Complexity

Conditions

Size

Total Lines	68
Code Lines	50

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	50
dl	0
loc	68
c	0
b	0
f	0
rs	4.8
cc	12

How to fix Long Method Complexity

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const browser = require('@sentry/browser');
const core = require('@sentry/core');
const React = require('react');
const hoistNonReactStatics = require('./hoist-non-react-statics.js');

// We need to disable eslint no-explicit-any because any is required for the
// react-router typings.

/**
 * A browser tracing integration that uses React Router v4 to instrument navigations.
 * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
 */
function reactRouterV4BrowserTracingIntegration(
  options,
) {
  const integration = browser.browserTracingIntegration({
    ...options,
    instrumentPageLoad: false,
    instrumentNavigation: false,
  });

  const { history, routes, matchPath, instrumentPageLoad = true, instrumentNavigation = true } = options;

  return {
    ...integration,
    afterAllSetup(client) {
      integration.afterAllSetup(client);

      instrumentReactRouter(
        client,
        instrumentPageLoad,
        instrumentNavigation,
        history,
        'reactrouter_v4',
        routes,
        matchPath,
      );
    },
  };
}

/**
 * A browser tracing integration that uses React Router v5 to instrument navigations.
 * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
 */
function reactRouterV5BrowserTracingIntegration(
  options,
) {
  const integration = browser.browserTracingIntegration({
    ...options,
    instrumentPageLoad: false,
    instrumentNavigation: false,
  });

  const { history, routes, matchPath, instrumentPageLoad = true, instrumentNavigation = true } = options;

  return {
    ...integration,
    afterAllSetup(client) {
      integration.afterAllSetup(client);

      instrumentReactRouter(
        client,
        instrumentPageLoad,
        instrumentNavigation,
        history,
        'reactrouter_v5',
        routes,
        matchPath,
      );
    },
  };
}

function instrumentReactRouter(
  client,
  instrumentPageLoad,
  instrumentNavigation,
  history,
  instrumentationName,
  allRoutes = [],
  matchPath,
) {
  function getInitPathName() {
    if (history.location) {
      return history.location.pathname;
    }

    if (browser.WINDOW.location) {
      return browser.WINDOW.location.pathname;
    }

    return undefined;
  }

  /**
   * Normalizes a transaction name. Returns the new name as well as the
   * source of the transaction.
   *
   * @param pathname The initial pathname we normalize
   */
  function normalizeTransactionName(pathname) {
    if (allRoutes.length === 0 || !matchPath) {
      return [pathname, 'url'];
    }

    const branches = matchRoutes(allRoutes, pathname, matchPath);
    for (const branch of branches) {
      if (branch.match.isExact) {
        return [branch.match.path, 'route'];
      }
    }

    return [pathname, 'url'];
  }

  if (instrumentPageLoad) {
    const initPathName = getInitPathName();
    if (initPathName) {
      const [name, source] = normalizeTransactionName(initPathName);
      browser.startBrowserTracingPageLoadSpan(client, {
        name,
        attributes: {
          [core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
          [core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.pageload.react.${instrumentationName}`,
          [core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
        },
      });
    }
  }

  if (instrumentNavigation && history.listen) {
    history.listen((location, action) => {
      if (action && (action === 'PUSH' || action === 'POP')) {
        const [name, source] = normalizeTransactionName(location.pathname);
        browser.startBrowserTracingNavigationSpan(client, {
          name,
          attributes: {
            [core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
            [core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.${instrumentationName}`,
            [core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
          },
        });
      }
    });
  }
}

/**
 * Matches a set of routes to a pathname
 * Based on implementation from
 */
function matchRoutes(
  routes,
  pathname,
  matchPath,
  branch = [],
) {
  routes.some(route => {
    const match = route.path
      ? matchPath(pathname, route)
      : branch.length
        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          branch[branch.length - 1].match // use parent match
        : computeRootMatch(pathname); // use default "root" match

    if (match) {
      branch.push({ route, match });

      if (route.routes) {
        matchRoutes(route.routes, pathname, matchPath, branch);
      }
    }

    return !!match;
  });

  return branch;
}

function computeRootMatch(pathname) {
  return { path: '/', url: '/', params: {}, isExact: pathname === '/' };
}

/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access */
function withSentryRouting(Route) {
  const componentDisplayName = Route.displayName || Route.name;

  const WrappedRoute = (props) => {
    if (props?.computedMatch?.isExact) {
      const route = props.computedMatch.path;
      const activeRootSpan = getActiveRootSpan();

      core.getCurrentScope().setTransactionName(route);

      if (activeRootSpan) {
        activeRootSpan.updateName(route);
        activeRootSpan.setAttribute(core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
      }
    }

    // @ts-expect-error Setting more specific React Component typing for `R` generic above
    // will break advanced type inference done by react router params:
    // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/13dc4235c069e25fe7ee16e11f529d909f9f3ff8/types/react-router/index.d.ts#L154-L164
    return React.createElement(Route, { ...props,} );
  };

  WrappedRoute.displayName = `sentryRoute(${componentDisplayName})`;
  hoistNonReactStatics.hoistNonReactStatics(WrappedRoute, Route);
  // @ts-expect-error Setting more specific React Component typing for `R` generic above
  // will break advanced type inference done by react router params:
  // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/13dc4235c069e25fe7ee16e11f529d909f9f3ff8/types/react-router/index.d.ts#L154-L164
  return WrappedRoute;
}
/* eslint-enable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access */

function getActiveRootSpan() {
  const span = core.getActiveSpan();
  const rootSpan = span && core.getRootSpan(span);

  if (!rootSpan) {
    return undefined;
  }

  const op = core.spanToJSON(rootSpan).op;

  // Only use this root span if it is a pageload or navigation span
  return op === 'navigation' || op === 'pageload' ? rootSpan : undefined;
}

exports.reactRouterV4BrowserTracingIntegration = reactRouterV4BrowserTracingIntegration;
exports.reactRouterV5BrowserTracingIntegration = reactRouterV5BrowserTracingIntegration;
exports.withSentryRouting = withSentryRouting;
//# sourceMappingURL=reactrouter.js.map


1			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
2
3			const browser = require('@sentry/browser');
4			const core = require('@sentry/core');
5			const React = require('react');
6			const hoistNonReactStatics = require('./hoist-non-react-statics.js');
7
8			// We need to disable eslint no-explicit-any because any is required for the
9			// react-router typings.
10
11			/**
12			* A browser tracing integration that uses React Router v4 to instrument navigations.
13			* Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
14			*/
15			function reactRouterV4BrowserTracingIntegration(
16			options,
17			) {
18			const integration = browser.browserTracingIntegration({
19			...options,
20			instrumentPageLoad: false,
21			instrumentNavigation: false,
22			});
23
24			const { history, routes, matchPath, instrumentPageLoad = true, instrumentNavigation = true } = options;
25
26			return {
27			...integration,
28			afterAllSetup(client) {
29			integration.afterAllSetup(client);
30
31			instrumentReactRouter(
32			client,
33			instrumentPageLoad,
34			instrumentNavigation,
35			history,
36			'reactrouter_v4',
37			routes,
38			matchPath,
39			);
40			},
41			};
42			}
43
44			/**
45			* A browser tracing integration that uses React Router v5 to instrument navigations.
46			* Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
47			*/
48			function reactRouterV5BrowserTracingIntegration(
49			options,
50			) {
51			const integration = browser.browserTracingIntegration({
52			...options,
53			instrumentPageLoad: false,
54			instrumentNavigation: false,
55			});
56
57			const { history, routes, matchPath, instrumentPageLoad = true, instrumentNavigation = true } = options;
58
59			return {
60			...integration,
61			afterAllSetup(client) {
62			integration.afterAllSetup(client);
63
64			instrumentReactRouter(
65			client,
66			instrumentPageLoad,
67			instrumentNavigation,
68			history,
69			'reactrouter_v5',
70			routes,
71			matchPath,
72			);
73			},
74			};
75			}
76
77			function instrumentReactRouter(
78			client,
79			instrumentPageLoad,
80			instrumentNavigation,
81			history,
82			instrumentationName,
83			allRoutes = [],
84			matchPath,
85			) {
86			function getInitPathName() {
87			if (history.location) {
88			return history.location.pathname;
89			}
90
91			if (browser.WINDOW.location) {
92			return browser.WINDOW.location.pathname;
93			}
94
95			return undefined;
96			}
97
98			/**
99			* Normalizes a transaction name. Returns the new name as well as the
100			* source of the transaction.
101			*
102			* @param pathname The initial pathname we normalize
103			*/
104			function normalizeTransactionName(pathname) {
105			if (allRoutes.length === 0 \|\| !matchPath) {
106			return [pathname, 'url'];
107			}
108
109			const branches = matchRoutes(allRoutes, pathname, matchPath);
110			for (const branch of branches) {
111			if (branch.match.isExact) {
112			return [branch.match.path, 'route'];
113			}
114			}
115
116			return [pathname, 'url'];
117			}
118
119			if (instrumentPageLoad) {
120			const initPathName = getInitPathName();
121			if (initPathName) {
122			const [name, source] = normalizeTransactionName(initPathName);
123			browser.startBrowserTracingPageLoadSpan(client, {
124			name,
125			attributes: {
126			[core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
127			[core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.pageload.react.${instrumentationName}`,
128			[core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
129			},
130			});
131			}
132			}
133
134			if (instrumentNavigation && history.listen) {
135			history.listen((location, action) => {
136			if (action && (action === 'PUSH' \|\| action === 'POP')) {
137			const [name, source] = normalizeTransactionName(location.pathname);
138			browser.startBrowserTracingNavigationSpan(client, {
139			name,
140			attributes: {
141			[core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
142			[core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.${instrumentationName}`,
143			[core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
144			},
145			});
146			}
147			});
148			}
149			}
150
151			/**
152			* Matches a set of routes to a pathname
153			* Based on implementation from
154			*/
155			function matchRoutes(
156			routes,
157			pathname,
158			matchPath,
159			branch = [],
160			) {
161			routes.some(route => {
162			const match = route.path
163			? matchPath(pathname, route)
164			: branch.length
165			? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
166			branch[branch.length - 1].match // use parent match
167			: computeRootMatch(pathname); // use default "root" match
168
169			if (match) {
170			branch.push({ route, match });
171
172			if (route.routes) {
173			matchRoutes(route.routes, pathname, matchPath, branch);
174			}
175			}
176
177			return !!match;
178			});
179
180			return branch;
181			}
182
183			function computeRootMatch(pathname) {
184			return { path: '/', url: '/', params: {}, isExact: pathname === '/' };
185			}
186
187			/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access */
188			function withSentryRouting(Route) {
189			const componentDisplayName = Route.displayName \|\| Route.name;
190
191			const WrappedRoute = (props) => {
192			if (props?.computedMatch?.isExact) {
193			const route = props.computedMatch.path;
194			const activeRootSpan = getActiveRootSpan();
195
196			core.getCurrentScope().setTransactionName(route);
197
198			if (activeRootSpan) {
199			activeRootSpan.updateName(route);
200			activeRootSpan.setAttribute(core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
201			}
202			}
203
204			// @ts-expect-error Setting more specific React Component typing for `R` generic above
205			// will break advanced type inference done by react router params:
206			// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/13dc4235c069e25fe7ee16e11f529d909f9f3ff8/types/react-router/index.d.ts#L154-L164
207			return React.createElement(Route, { ...props,} );
208			};
209
210			WrappedRoute.displayName = `sentryRoute(${componentDisplayName})`;
211			hoistNonReactStatics.hoistNonReactStatics(WrappedRoute, Route);
212			// @ts-expect-error Setting more specific React Component typing for `R` generic above
213			// will break advanced type inference done by react router params:
214			// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/13dc4235c069e25fe7ee16e11f529d909f9f3ff8/types/react-router/index.d.ts#L154-L164
215			return WrappedRoute;
216			}
217			/* eslint-enable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access */
218
219			function getActiveRootSpan() {
220			const span = core.getActiveSpan();
221			const rootSpan = span && core.getRootSpan(span);
222
223			if (!rootSpan) {
224			return undefined;
225			}
226
227			const op = core.spanToJSON(rootSpan).op;
228
229			// Only use this root span if it is a pageload or navigation span
230			return op === 'navigation' \|\| op === 'pageload' ? rootSpan : undefined;
231			}
232
233			exports.reactRouterV4BrowserTracingIntegration = reactRouterV4BrowserTracingIntegration;
234			exports.reactRouterV5BrowserTracingIntegration = reactRouterV5BrowserTracingIntegration;
235			exports.withSentryRouting = withSentryRouting;
236			//# sourceMappingURL=reactrouter.js.map
237

LCSOGthb / AirMerge

reactrouter.js ➔ instrumentReactRouter D last analyzed 2025-10-13 00:06 UTC

Complexity

Size

Duplication

Importance

How to fix Long Method Complexity

Long Method

Complexity

Duplication Side-by-Side

Filter issues like

reactrouter.js ➔ instrumentReactRouter D
last analyzed 2025-10-13 00:06 UTC